<template>
	<view class="store">
		<!-- 导航栏 -->
		<view class="store-header">
			<!-- 内容 -->
			<view class="store-header-box">
				<view>
					<text class="iconfont store-header-box-title" @tap="goHome">&#xe614;</text>
					<text>区域互联网购物</text>
				</view>
				<view>
				</view>
			</view>
		</view>
		<!-- 头部 -->
		<uni-nav-bar fixed="true" statusBar="true">
			<template slot="left">
				<view class="navInputBox">
					<input type="text" value="" :placeholder="placeholder" class="iconfont navInput" />
				</view>
			</template>
			<template slot="right">
				<view class="rightClass">
					<uni-icons type="cart" size="28" color="#666"></uni-icons>
					<uni-icons type="location-filled" size="28" color="#666"></uni-icons>
				</view>
			</template>
		</uni-nav-bar>
		<view class="Listcontent">
			<!-- 内容 瀑布流 -->
			<waterfall-flow :list="list" :loading="loading" @click="choose"></waterfall-flow>
		</view>
	</view>
</template>

<script>
	// 瀑布流组件
	import WaterfallFlow from '@/components/nairenk-waterfall-flow/nairenk-waterfall-flow.vue';
	// 模拟 JSON 数据
	const data = require('@/common/json/data.json');
	export default {
		data() {
			return {
				list: [],
				loading: true,
				page: 1,
				start: 0,
				end: 0,
				placeholder:'请输入您想要的商品'
			}
		},
		onLoad() {
			this.getList();
		}, 
		onReachBottom() {
			this.page++;
			this.loading = true;
			this.getList();
		},
		methods: {
			// 选中
			choose(item) {
				// item 返回选中 JSON 对象
				console.log(item)
				uni.navigateTo({
					url:'/pages/store/productDtail/productDtail'
				})
			},
			// 模拟加载数据
			getList() {
				if (this.list.length < data.list.length) {
					setTimeout(() => {
						this.end = this.page * 10;
						this.list = this.list.concat(data.list.slice(this.start, this.end));
						this.start = this.end;
						// 延迟 120 毫秒隐藏加载动画，为了跟组件里面的 100 毫秒定位有个平缓过度
						setTimeout(() => {
							this.loading = false;
						}, 120);
					}, 1000)
				} else {
					this.loading = false;
				}
			},
			/* 返回首页 */
			goHome: function() {
				console.log(1);
				uni.switchTab({
					url: '../../index/index'
				})
			},
		},
		components:{
			WaterfallFlow
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../../static/color.less");
	
	/* 引入fontSize.less */
	@import url("../../../static/fontSize.less");
	
	/* 主体 */
	.store {
		background-color: #F5F5F5;
	}
	
	/* 头部 */
	.store-header {
		height: 150rpx;
		position: sticky;
		top: 0;
		background-color: @masterColor;
		z-index: 900;
	
		/* 内容 */
		.store-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;
	
			view {
				&:first-child {
					width: 564rpx;
					font-size: @fontBigger;
	
					/* 标题 */
					.store-header-box-title {
						padding-left: 34rpx;
						font-size: @fontBigger;
					}
	
					&>text:last-child {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
	
				&:last-child {
					width: 78rpx;
					margin-right: 32rpx;
	
					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
					}
				}
	
				display: flex;
				align-items: center;
			}
			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}
	
	
.navInput{
	border: 1px solid #B5B5B5;
	position: absolute;
	width: 530rpx;
	top: 0;
	height: 60rpx;
	border-radius: 10rpx;
	padding: 20rpx;
	box-sizing: border-box;
}
.rightClass{
	text-align: right;
}
.navInputBox{
	width: 300%!important;
	/* border: 1px solid #FF0000; */
	position: relative;
	height: 60rpx
}
.title {
		width: 100%;
		height: 100%;
		text-align: center;
}
.rightClass{
	width: 100%;
	height: 100%;
	position: relative;
}
.title1{
	width: 28rpx;
	height: 28rpx;
	border-radius: 20rpx;
	text-align: center;
	line-height: 28rpx;
	color: #FF0000;
	background-color: #FBBCBC;
	position: absolute;
	left: 30rpx;
	top: 10rpx;
	font-size: 20rpx;
	z-index: 20;
}	
.search{
	width: 45rpx;
	height: 45rpx;
	}
.Smessage{
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
	}
	.Listcontent{
		margin-top: 50rpx;
	}
</style>
